<template>
	<view style="position: relative;">
		<view>
			<view class="header-image">
				<image src="http://inews.gtimg.com/newsapp_bt/0/12241101583/0/0" mode="aspectFill" class="header-image"></image>
			</view>
			<view class="header-note">
				<p class="center word-space">或大大哇打我达大酒店官网很关键had还给我还去打给我机会刚到货管委会讲话稿大股东为结婚达瓦大大好搭嘎都我高就好尴尬的给我个个</p>
			</view>
		</view>
		<u-gap height="20" bg-color="#f0f0f0"></u-gap>
		<view class="content">
			<view class="flex goods" v-for="(itm,index) in list" :key="index">
				<view class="check">
					<u-checkbox v-model="itm.checked" shape="circle" @change="check(item,index)"></u-checkbox>
				</view>
				<view class="image borderR">
					<image :src="itm.goods_image" mode="aspectFill" class="image"></image>
				</view>
				<view class="title flex direction">
					<view class="title-top">
						<p class="word-space textL">{{itm.goods_name}}</p>
					</view>
					<view class="title-bot flex">
						<view class="allMoney">
							<span class="price">￥<span class="priceN">{{itm.goods_discount}}</span></span>
							<span class="notPrice">￥<span class="notPriceN">{{itm.goods_price}}</span></span>
						</view>
						<view class="buyNum">
							<uni-number-box :min="1" :max="100" :value="itm.number" :isMin="itm.number===1" :index="index" @eventChange="numberChange"
							 :data-index='itm.index'></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="post-bot flex">
			<view>
				<u-checkbox v-model="allBuy" shape="circle" @change="checkedAll">全选</u-checkbox>
			</view>
			<view class="flex">
				<view class="bot-title">合计：</view>
				<view class="bot-price">
					<view class="bot-money">{{totalPrice}}元</view>
					<view class="bot-coupon">优惠总价格：15:00</view>
				</view>
				<view class="bot-btn center" @click="createOrder">立即抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/cart/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				totalPrice: 0,
				allBuy: true,
				list: [{
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp", //商品图片
					goods_name: "凉鞋", //商品名称             
					goods_spec: "大码", //商品规格              
					goods_discount: 40.8, //商品折扣            
					goods_price: 58.8, //商品价格             
					checked: true, //是否选中该商品              
					number: 4, //商品购买数量
					id: '201929892'
				}, {
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp",
					goods_name: "女士休闲鞋",
					goods_spec: "中码",
					goods_discount: 40,
					goods_price: 58.8,
					checked: true,
					number: 1,
					id: '201929893'
				}, {
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp",
					goods_name: "凉鞋女",
					goods_spec: "大小码",
					goods_discount: 40,
					goods_price: 58.8,
					checked: true,
					number: 1,
					id: '201929894'
				}, {
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp",
					goods_name: "女士休闲鞋",
					goods_spec: "小码",
					goods_discount: 40.22,
					goods_price: 58.28,
					checked: true,
					number: 1,
					id: '201929895'
				}]
			}
		},
		created() {
			this.updateTotalPrice();
		},
		methods: {
			// 全选
			checkedAll(e) {
				this.list.map(val => {
					val.checked = e.value;
				})
				this.updateTotalPrice();
			},
			//数量
			numberChange(data) {
				this.list[data.index].number = data.number;
				this.updateTotalPrice();
			},
			//计算总价
			updateTotalPrice() {
				if (this.list.length === 0) {
					return;
				}
				let totalPrice = 0;
				this.list.forEach(item => {
					if (item.checked === true) {
						totalPrice += item.goods_discount * item.number;
					}
				})
				this.totalPrice = Number(totalPrice.toFixed(2));
			},
			//选中状态处理
			check(type, index) {
				let i = 0;
				if (type === 'item') {
					this.list[index].checked = !this.list[index].checked
				}
				this.list.map(val => {
					if (val.checked === true) {
						i++;
					}
				})
				this.updateTotalPrice();
				if (this.list.length != i) {
					this.allBuy = false;
				} else {
					this.allBuy = true;
				}
			},
			createOrder() {
				uni.navigateTo({
					url:"/pages/order/confirm/confirm"
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		padding: 0 20rpx 100rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.direction {
		flex-direction: column;
	}

	.header-image {
		width: 100%;
		height: 300rpx;
	}

	.center {
		text-align: center;
	}
	
	.textL{
		width: 100%;
		text-align: left;
	}

	.header-note {
		width: 100%;
		height: 100rpx;
		padding: 20rpx;
		color: #666666;
		font-size: 26rpx;
		background: #FFFFFF;
	}

	.goods {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 10rpx 0;
		padding-right: 10rpx;
		margin-bottom: 20px;
	}

	.goods:last-child {
		margin-bottom: 0;
	}

	.check {
		padding-left: 20rpx;
	}

	.image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.borderR {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.title {
		width: 380rpx;
		height: 220rpx;
		padding: 20rpx 0;
	}

	.title-top {
		width: 100%;
		font-size: 28rpx;
		color: #333333;
	}

	.title-bot {
		width: 100%;
	}

	.allMoney {
		width: 200rpx;
	}

	.price {
		font-size: 24rpx;
		color: #EB1515;
	}

	.priceN {
		font-size: 36rpx;
	}

	.notPrice {
		font-size: 20rpx;
		color: #A3A3A3;
	}

	.notPriceN {
		font-size: 24rpx;
	}

	.post-bot {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		width: 100%;
		padding: 14rpx 20rpx;
		z-index: 5;
	}

	.bot-title {
		font-size: 24rpx;
		color: #333333;
	}

	.bot-price {
		margin-right: 20rpx;
	}

	.bot-money {
		font-size: 32rpx;
		color: #F22731;
	}

	.bot-coupon {
		font-size: 20rpx;
		color: #808080;
	}

	.bot-btn {
		width: 192rpx;
		height: 72rpx;
		background: #F73657;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 72rpx;
	}
</style>
